<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <section class="card">
        <header>
            <span>卡片标题1</span>
            <a>+</a>
        </header>
        <div>
            <p>卡片内容</p>
            <span>点击标题看效果...</span>
        </div>
    </section>
    <section class="card">
        <header>
            <span>卡片标题2</span>
            <a>+</a>
        </header>
        <div>
            <p>卡片内容</p>
        </div>
    </section>
    <section class="card">
        <header>
            <span>卡片标题3</span>
            <a>+</a>
        </header>
        <div>
            <p>卡片内容</p>
        </div>
    </section>
    <script>
        var onCardHeaderClick = function(event) {
            var target = event.currentTarget;
            var isClosed = target.getAttribute("data-state") == 'closed';
            var cardState = {
                state: 'opened',
                btnText: '+'
            }
            if(isClosed) {
                target.parentElement.classList.remove("cardCollapse");
                cardState.state = 'opened';
                cardState.btnText = '+';
            } else {
                target.parentElement.classList.add("cardCollapse");
                cardState.state = 'closed';
                cardState.btnText = '-';
            }
            target.setAttribute("data-state", cardState.state);
            target.getElementsByTagName("a")[0].innerText = cardState.btnText;
        }
        var cardDomList = document.getElementsByClassName("card");
        for(var i=0;i<cardDomList.length;i++) {
            var target = cardDomList[i];
            (function(dom){
                var header = dom.getElementsByTagName("header")[0];
                header.addEventListener("click", onCardHeaderClick);
            })(target);
        }
    </script>
</body>
</html>